<template>
  <div>
    <div class="swiper" v-if="swipes.length">
      <van-swipe :autoplay="3000" :indicator-color="rootThemeColor">
        <van-swipe-item
          v-for="item in swipes"
          :key="item.id"
        >
          <div class="cover">
            <img class="img" v-lazy="item.pic+'@480w_270h'" />
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    
    <refresh-list
      v-if="list.length"
      ref="refreshList"
      @pull-refresh="handleRefresh"
      @pull-load="handlePullLoad"
    >
      <div class="list">
        <video-item
          class="vi"
          v-for="item in videoList"
          :key="item.avid"
          :aid="item.aid"
          :bvid="item.bvid"
          :title="item.title"
          :coverPath="item.pic"
          :view="item.play || item.stat.view"
          :danmaku="item.video_review || item.stat.danmaku"
          :allParams="item"
        />
      </div>
    </refresh-list>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import {
  Swipe as VanSwipe,
  SwipeItem as VanSwipeItem
} from 'vant'
import { formatImage } from '@/filters/filters'
import VideoItem from '@/components/video-item/VideoItem'
import RefreshList from '@/components/refresh-list/RefreshList'
import * as types from '@/store/mutation-types'

export default {
  name: 'Index',
  inject: ['rootTitle'],
  metaInfo () {
    return {
      title: this.rootTitle
    }
  },
  components: {
    VanSwipe,
    VanSwipeItem,
    RefreshList,
    VideoItem
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    ...mapState('index', ['swipes', 'list']),
    totalPage () {
      return Math.ceil(this.list.length / this.pageSize)
    },
    videoList () {
      return this.list.slice(0, this.currentPage * this.pageSize)
    }
  },
  filters: {
    formatImage
  },
  asyncData ({store, route}) {
    return store.dispatch('index/asyncData')    
  },
  created () {  
    if (this.swipes.length === 0) {
      this.GET_INDEX_SWIPE()
    }  
    if (this.list.length === 0) {
      this.getRecommend()
    }
  },
  mounted() {
    if (this.list.length) {
      this.stopLoad()
    }
  },
  methods: {
    ...mapActions('index', [`${types.GET_INDEX_SWIPE}`, `${types.GET_INDEX_RECOMMEND}`]),
    stopLoad() {
      this.$refs.refreshList && this.$refs.refreshList.stopLoad()
    },
    completeLoad() {
      this.$refs.refreshList && this.$refs.refreshList.completeLoad()
    },
    showError() {
      this.$refs.refreshList && this.$refs.refreshList.showError()
    },
    stopRefresh() {
      this.$refs.refreshList && this.$refs.refreshList.stopRefresh()
    },
    getRecommend () {      
      this.GET_INDEX_RECOMMEND().then(res => {
        this.currentPage = 1
        if (Array.isArray(res) && res.length === 0) {
          this.completeLoad()
        }
      }).catch(err => {
        console.log(err)
        this.showError()
      }).finally(() => {
        this.stopLoad()
        this.stopRefresh()
      })
    },
    handleRefresh () {  
      this.getRecommend()
    },
    handlePullLoad () {      
      if (this.currentPage < this.totalPage) {
        this.currentPage++
      } else if (this.currentPage === this.totalPage) {
        this.completeLoad()
      }
      this.stopLoad()
    }    
  }
}
</script>
<style lang="scss" scoped>
  .swiper{
    position: relative;
    padding: {
      left: 10px;
      right: 10px;
    }
    overflow: hidden;
    margin-top: 10px;
    box-sizing: border-box;
    border-radius: 2px;

    ::v-deep .van-swipe__indicators{
      left: auto;
      right: 10px;
      transform: none;
    }
    ::v-deep .van-swipe__indicator{
      opacity: 1;
      background-color: $color-white;
    }

    .cover{
      @include cover(480, 141);
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
    }
  }
  .list{
    padding: {
      left: 5px;
      right: 5px;
    };
    display: flex;
    flex-wrap: wrap;
    .vi{
      width: 50%;
      box-sizing: border-box;
    }
  }
</style>
